import React, { Component } from 'react';
import { Modal, message, Col, Row, Tag, Card, Tree } from 'antd';
const { TreeNode } = Tree;
export default class SetPublish extends Component {
  state = {
    devIdArray: this.props.selectedRows,
    progId: '',
  };
  handleSet = () => {
    const { selectedRows, dispatch } = this.props;
    const { devIdArray, progId } = this.state;
    const devIds = devIdArray.join(',');
    if (progId === '' || devIdArray.length === 0) {
      message.error('请选择要发布的设备和节目');
    } else {
      // console.log('Received values of form: ', targetKeys, record.progId);
      // const progSize = `${values.width}*${values.height}`;

      this.props.dispatch({
        type: 'program/publish',
        payload: { devIds, progId },
        callback: () => {
          message.success('调用节目发布任务成功，详细进度请查看任务中心.');
          this.props.handleModalVisible(false);
          this.props.history.push(`/devlog/tasklist/${progId}`);
        },
      });
    }
  };
  onSelect = selectKeys => {
    //console.log('selectkeys', selectKeys);
    this.setState({ progId: selectKeys });
  };

  onCheck = checkedKeys => {
    //console.log('selectkeys', checkedKeys);
    this.setState({ devIdArray: checkedKeys });
  };
  render() {
    const { selectedRows, program } = this.props;
    let programlist = [];
    //console.log('program', program)
    if (program.list.length) {
      programlist = program.list.filter(item => item.progAuditStatus === 1);
    }
    const { modalVisible, handleModalVisible } = this.props;
    return (
      <Modal
        title="发布节目"
        visible={modalVisible}
        onOk={this.handleSet}
        onCancel={() => handleModalVisible(false)}
        width={800}
      >
        <Row gutter={20}>
          <Col span={12}>
            <Card title="设备列表（多选）" bodyStyle={{ height: 600, overflow: 'scroll' }}>
              {selectedRows.length ? (
                <Tree
                  checkable
                  style={{ height: 600 }}
                  defaultCheckedKeys={selectedRows}
                  onCheck={this.onCheck}
                >
                  {selectedRows.map(data => (
                    <TreeNode title={data} key={data} />
                  ))}
                </Tree>
              ) : (
                'loading tree'
              )}
            </Card>
          </Col>
          <Col span={12}>
            <Card title="审核节目列表（单选）" bodyStyle={{ height: 600, overflow: 'scroll' }}>
              {programlist.length ? (
                <Tree style={{ height: 600 }} onSelect={this.onSelect}>
                  {programlist.map(data => (
                    <TreeNode title={data.progName} key={data.progId} />
                  ))}
                </Tree>
              ) : (
                'loading tree'
              )}
            </Card>
          </Col>
        </Row>
      </Modal>
    );
  }
}
